<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit>
        <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
          <div class="table-operator">
                <a-button type="primary" @click="delByIds(selectedRowKeys)" v-if="removeEnable && selectedRowKeys.length > 0">
                    <a-icon type="delete" />{{i18n('list.delAll','删除选中')}}
                </a-button>
          </div>
          <span class="search-btn-box">
                <span class="search-btn" @click="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
           </span>
        </div>
        <div slot="searchbar" btnalign="right"  v-if="fitSearch" @search="search" @cancel="cancel" @close="close">
          <a-form layout="vertical">
              <a-form-item :label="i18n('form.name','名称')">
                  <a-input :placeholder="i18n('form.name','名称')" v-model="queryParam.Q_NAME__S_LK"/>
              </a-form-item>
                <a-form-item :label="i18n('form.cityCode','城市编码')">
                    <a-input :placeholder="i18n('form.cityCode','城市编码')" v-model="queryParam.Q_CODE__S_LK"/>
                </a-form-item>
          </a-form>
        </div>
        <rx-grid
                ref="table"
                :allowRowSelect="true"
                :multiSelect="true"
                :columns="columns"
                :defaultPageSize="10"
                :dataSource="cityList"
                :pageSizeOptions="['10','30','40']"
                id-field="id"
                @selectChange="onSelectChange"
        >
          <span slot="category" slot-scope="{ text, record }">
                <a-tag :color="categoryMap[text].color">
                  <span>{{ categoryMap[text].text }}</span>
                </a-tag>
              </span>
          <span slot="sn" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.sn" @blur.stop="blur(index,'sn',text,record)" @blur="saveRecord(record)"/>
          </span>
          <span slot="action" slot-scope="{ text, record }" class="actionIcons">
              <span  @click="delByIds([record.id])">{{$ti18('rxList.delBtn','删除')}}</span>
          </span>
        </rx-grid>

      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>

  import FormPopularCityApi from "@/api/form/core/formPopularCity";
  import {BaseList,RxFit} from "@lowcode/jpaas-common-lib";

  export default {
    name: 'FormPopularCityList',
    mixins: [BaseList],
    components: {
      RxFit
    },
    data() {
      return {
        columns: [
          {title: this.i18n('form.name','名称'), dataIndex: 'name', width: 100},
          {title: this.i18n('form.cityCode','城市编码'), dataIndex: 'code', width: 100},
          {title: this.i18n('form.category', '分类'), dataIndex: 'category', width: 100,scopedSlots: {customRender: 'category'}},
          {title: this.i18n('form.sortNum', '排序号(点击可修改)'), dataIndex: 'sn',  width: 100,allowCellEdit: true,scopedSlots: {customRender: 'sn'}},
          {title: this.$ti18('rxList.action','操作'), width: 100, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
        ],
        comment:this.i18n('form.popularCity', "热门城市"),
        widthHeight:['800px','600px'],
        fitSearch:false,
          categoryMap: {
              "1": {color: 'green', text: this.i18n('form.internal', "国内")},
              "2": {color: 'red', text: this.i18n('form.international', "国际")},
          },
        cityList:[]
      }
    },
    created() {
        this.initPopularCity();
    },
      methods:{
          i18n(name, text, key) {
              return this.$ti18(name, text, "formPopularCity", key);
          },
      delByIds(ids){
          let self_  = this;
          this.$confirm({
              title: this.$ti18('rxMsa.actionTips', '操作提示'),
              content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
              okText: this.$ti18('rxForm.ackBtn', '确认'),
              cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
              onOk() {
                  FormPopularCityApi.delByIds({ id: ids.join(',') }).then(res => {
                      self_.initPopularCity();
                      return res;
                  });
              },
              onCancel() {

              }
          })

      },
        saveRecord(record){
            FormPopularCityApi.save(record).then(res => {
                this.initPopularCity();
            })
        },
      initPopularCity(){
          FormPopularCityApi.getPopularCityOrderBySn().then(data => {
              this.cityList = data;
          })
      },
      search(){
        FormPopularCityApi.query(this.queryParam).then(res => {
            if(res.success){
                this.cityList = res.result.data;
            }
        })
      },
      cancel(){
        this.resetSearch();
      },
      close(){
        //关闭按钮
        this.fitSearch = false ;
      },
    }
  }
</script>
<style scoped>
  .table-operator {
    padding:4px;
  }
  .table-operator button {
    margin:2px;
  }
</style>

